<template>
  <div>
    <!--    <vxe-button style="margin: 10px 0" content="模板上传" @click="val1 = true"></vxe-button>-->
    <el-button style="margin: 20px 0" type="primary" @click="val1 = true">模板上传<i
      class="el-icon-upload el-icon--right"></i></el-button>

    <el-select v-model="mblx2" placeholder="模板类型" @change="inputChange2" style="margin: auto 30px">
      <el-option
        v-for="item in mblxOptions2"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>

    <vxe-modal v-model="val1" width="800" maskClosable>
      <template #title>
        <span>模板上传</span>
      </template>

      <template #default>
        <el-row>
          <el-col :span="12" style="text-align: center">
            <el-col :span="10" style="text-align:right;padding: 5px 20px;color: #2eb3ff">模板类型</el-col>
            <el-col :span="14" style="padding-right: 10px">
              <el-select v-model="mblx" placeholder="模板类型" @change="inputChange">
                <el-option
                  v-for="item in mblxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="12" style="text-align: center;margin: 100px auto">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="action"
              accept=".docx, .doc"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="successUpload"
              :file-list="fileList"
              :limit="1"
              :auto-upload="true">
              <el-button slot="trigger" type="success">选择文件</el-button>
            </el-upload>
          </el-col>
        </el-row>

      </template>
    </vxe-modal>

    <vxe-table
      round
      stripe
      border
      align="center"

      :data="tableData">
      <vxe-column field="fileViewName" title="文件名"></vxe-column>
      <vxe-column field="cru" width="130" title="创建人"></vxe-column>
      <vxe-column field="createTime" width="250" title="创建时间"></vxe-column>
      <vxe-column field="upu" width="130" title="修改人"></vxe-column>
      <vxe-column field="updateTime" width="250" title="修改时间"></vxe-column>
      <vxe-column title="操作" width="200">
        <template #default="{ row, rowIndex  }">
          <el-row>
            <el-col :span="8">
              <i class="el-icon-download" style="color: #409EFF;font-size: 17px;cursor: pointer;margin: auto 5px"
                 @click="downloadFile(row.id)"></i>
              <!--              <el-button @click="downloadFile(row)">下载</el-button>-->
            </el-col>
            <el-col :span="8">
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="updateAction + 'id=' + row.id"
                accept=".docx, .doc"
                :on-success="successUpdate"
                :on-progress="beforeUpdate"
                :multiple="false"
                :show-file-list="false"
                :auto-upload="true">

                <i v-if="!updateLoading[rowIndex]" class="el-icon-edit" style="color: #67C23A;font-size: 17px;cursor: pointer;margin: auto 5px"
                   @click="cellClickEvent(rowIndex)"></i>
                <i v-else class="el-icon-loading" style="color: #67C23A;font-size: 17px;margin: auto 5px"></i>
                <!--                <el-button slot="trigger" type="success" :loading.sync="updateLoading[rowIndex]" @click="cellClickEvent(rowIndex)">修改</el-button>-->
              </el-upload>
            </el-col>
            <el-col :span="8">
              <el-popconfirm
                confirm-button-text='确定' cancel-button-text='不用了'
                icon="el-icon-info" icon-color="red" title="确定要删除这个模板吗？"
                @confirm="deleteMb(row.id)"
              >
                <i slot="reference" class="el-icon-delete"
                   style="color: #F56C6C;font-size: 17px;cursor: pointer;margin: auto 5px;"></i>
              </el-popconfirm>
            </el-col>

          </el-row>


        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import {getByName} from "@/api/systemManage/selectOptions";
import {deleteById, getByCompany, download} from "@/api/template/template";

export default {
  data() {
    return {
      allAlign: null,
      tableData: [],
      val1: false,
      action: '/api/jdcpg/template/upload?ywlx=',
      action2: '/api/jdcpg/template/upload?ywlx=',
      fileList: [],
      mblxOptions: [],
      mblxOptions2: [],
      mblx: '',
      mblx2: '',
      updateAction: '/api/jdcpg/template/update?',

      updateLoading: [],
      rowIndexs: 0
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    getMblxOptions() {
      getByName("name=上传模板类型").then(
        (res) => {
          this.mblxOptions = res.data
          this.mblxOptions2 = res.data
          this.mblx = res.data[0].label
          this.mblx2 = res.data[0].label
          this.action = this.action2 + this.mblx;

          this.getTableData()
        }
      )
    },
    successUpload(response, file, fileList) {
      this.$message({
        message: '上传成功',
        type: 'success'
      });
      this.val1 = false;
      this.fileList = [];
      this.getTableData();
    },
    errorUpload(response, file, fileList) {
      this.$message.error('上传失败');
      this.val1 = false;
      this.fileList = [];
    },
    beforeUpdate(file) {
      this.updateLoading[this.rowIndexs] = true;
    },
    successUpdate(response, file, fileList) {
      this.$message({
        message: '修改成功',
        type: 'success'
      });
      //this.updateLoading[this.rowIndex] = false;
      this.getTableData();
    },
    inputChange() {
      this.action = this.action2 + this.mblx;
    },
    inputChange2() {
      this.getTableData()
    },
    getTableData() {
      this.updateLoading = [];
      this.tableData = [];
      getByCompany('ywlx=' + this.mblx2).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].createTime != null) {
            res.data[i].createTime = res.data[i].createTime.substring(0, 10) + "  " + res.data[i].createTime.substring(11, 19);
          }
          if (res.data[i].updateTime != null) {
            res.data[i].updateTime = res.data[i].updateTime.substring(0, 10) + "  " + res.data[i].updateTime.substring(11, 19);
          }
          this.updateLoading.push(false)
        }
        this.tableData = res.data
      })
    },
    downloadFile(id) {
      // download("id=" + id)
      window.location = "/api/jdcpg/template/download?" + "id=" + id
    },
    cellClickEvent(rowIndex) {
      this.rowIndexs = rowIndex
    },
    deleteMb(id){
      deleteById("id=" + id).then(
        (res) => {
          if (res.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
          else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }

          this.getTableData()
        }
      )
    }
  },
  mounted() {
    this.getMblxOptions()

  }
}
</script>

<style scoped>

</style>
